<script lang="ts" setup>
import type { ButtonProps } from 'ant-design-vue';

import { createIconifyIcon } from '@vben/icons';

import { Button } from 'ant-design-vue';

interface Action {
  icon?: string;
  iconName?: string;
  type?: ButtonProps['type'];
  text: string;
  props?: ButtonProps;
  class?: string;
  onClick?: () => void;
  danger?: boolean;
}
defineProps<{
  actions: Action[];
}>();
</script>

<template>
  <div class="flex">
    <Button
      v-for="(action, index) in actions"
      :key="index"
      v-bind="{
        ...action.props,
        danger: action.danger,
        class: ['mr-2', action.class].join(' '),
      }"
      :class="action.class"
      :type="action.type"
      @click="action.onClick"
    >
      <template v-if="action.icon">
        <component :is="action.icon" class="mr-1" />
      </template>
      <template v-else-if="action.iconName">
        <component :is="createIconifyIcon(action.iconName)" class="mr-1" />
      </template>
      {{ action.text }}
    </Button>
  </div>
</template>
